<!-- 我的纸条 -->
<template>
	<view id="body">
		<!-- 内容中心 -->
		<view class="content"> 
			<!-- 顶部图片 -->
			<view class="content-top-img">
				<u-swiper
						:list="imglist"
						previousMargin="0"
						nextMargin="0"
						circular
						autoplay="true"
						interval=3000
						radius="8"
						bgColor="#ffffff"
				></u-swiper>
				</view>
				<!-- 箱子内容 -->
				<view class="content-chest">
					<view class="chest-left">
						<!-- 箱子头部盒子 -->
						<view class="chest-left-top">
							<!-- 箱子中间圆角 -->
							<view class="chest-left-center">
							</view>
						</view>
						<!-- 箱子底部 -->
						<view class="chest-left-bottom">
							<view class="bottom-img">
								<image src="https://ft-glb.oss-cn-chengdu.aliyuncs.com/%E4%BA%A4%E5%8F%8B%E4%B8%AD%E5%BF%83/%E7%94%B7%E7%94%9F%E7%9B%92%E5%AD%90.png" class="b-img"></image>
							</view>
							<text class="mannum">纸条个数:{{boynum}}</text>
							<view class="bottom-man">
								<text class="bottom-man-text1" @click="boyin">放入一张男生纸条</text>
								<text class="bottom-man-text1" @click="boyout">抽取一张男生纸条</text>
							</view>
						</view>
					</view>
					<!-- 女生箱子 -->
					<view class="chest-right">
						<!-- 箱子头部盒子 -->
						<view class="chest-right-top">
							<!-- 箱子中间圆角 -->
							<view class="chest-right-center">
							</view>
						</view>
						<!-- 箱子底部 -->
						<view class="chest-right-bottom">
							<view class="bottom-img">
								<image src="https://ft-glb.oss-cn-chengdu.aliyuncs.com/%E4%BA%A4%E5%8F%8B%E4%B8%AD%E5%BF%83/%E5%A5%B3%E7%94%9F%E7%9B%92%E5%AD%90.png" class="b-img"></image>
							</view>
							<text class="mannum">纸条个数:{{girlnum}}</text>
							<view class="bottom-man">
								<text class="bottom-man-text1"  @click="girlin">放入一张女生纸条</text>
								<text class="bottom-man-text1" @click="girlout">抽取一张女生纸条</text>
							</view>
						</view>
					</view>
					<!-- 规则介绍 -->
					<view class="rule" @click="open">
						<text>玩法介绍</text>
					</view>
				</view>
				<!-- 弹出层 -->
				<u-popup :show="show" :round="10" mode="bottom" @close="close" @open="open">
					<text class="pop-top">玩法介绍</text>
					<text class="pop-centre">主要玩法为通过放置纸条和抽取纸条进行交友,互动。</text>
					<text class="pop-centre2">您不知道会抽到谁的纸条，也不知道您的纸条将会被谁抽到,如果您放入纸条，建议您认真填写，以便喜欢您的人能够及时联系到您。</text>
					<text class="pop-centre3">希望您带着一颗真诚的心，乱填的纸条有可能作废喔,最后祝您早日收获一段美好的姻缘。</text>
					<text class="pop-centre4"></text>
				</u-popup>
				<!-- 放入男生纸条模态框 -->
				<view class="mtk">
					<u-popup :show="ztshow" :round="10"  mode="center" @close="close1" @open="open1" >
						<view class="ct">
							<text class="cttext">放入纸条</text>
							<view class="cttitle">
								<input placeholder="纸条标题" v-model="cttitle" />
							</view>
							<view class="ctview">
								<input placeholder="纸条内容" v-model="cttext" />
							</view>
							<view class="ztbutton" @click="ztbutton">
								<text style="line-height: 68rpx;">塞入箱子</text>
							</view>
						</view>
					</u-popup>
				</view>
				<!-- 放入女生纸条 -->
				<view class="mtk">
					<u-popup :show="ztshow1" :round="10"  mode="center" @close="close2" @open="open2" >
						<view class="ct">
							<text class="cttext">放入纸条</text>
							<view class="cttitle">
								<input placeholder="纸条标题" v-model="cttitle" />
							</view>
							<view class="ctview">
								<input placeholder="纸条内容" v-model="cttext" />
							</view>
							<view class="ztbutton" @click="ztbutton1">
								<text style="line-height: 68rpx;">塞入箱子</text>
							</view>
						</view>
					</u-popup>
				</view>
				<!-- 抽取的纸条模态框 -->
				<view>
					<u-modal :show="cqshow" @confirm="ztclose" >
						<view class="ztct">
							<view class="zttitle">
								<text>{{note.title}}</text>
							</view>
							<view class="ztimg">
								<image :src="note.issueUserImg" class="ztimg-img"></image>
							</view>
							<view class="ztusername">
								<text>{{note.issueUserName}}</text>
							</view>
							<view class="ztcreateTime">
								<text>{{note.createTime}}</text>
							</view> 
							<view class="ztcontent">
								<text>{{note.content}}</text>
							</view>
						</view>
					</u-modal>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {http} from "../static/service/requestAddress/rtas.js"
	export default {
		data() {
			return {
				imglist:[
					"https://ft-glb.oss-cn-chengdu.aliyuncs.com/%E4%BA%A4%E5%8F%8B%E4%B8%AD%E5%BF%83/lunbo1.jpg",
					"https://ft-glb.oss-cn-chengdu.aliyuncs.com/%E4%BA%A4%E5%8F%8B%E4%B8%AD%E5%BF%83/lunbo2.jpg"
					],
				boynum:"",
				girlnum:"",
				show:false,
				ztshow:false,
				ztshow1:false,
				cqshow:false,
				cqtitle:"",
				cqcontent:"",
				cttitle:"",//纸条标题
				cttext:"",//纸条内容
				note:{
				},//抽取的纸条信息
			}
		},
		created(){
			var bnum = ""
			var gnum = ""
			var promise = new Promise(function(resolve,reject){
				uni.request({
					url:http+"note/getnotenum/boy",
					method:"GET",
					complete:(res)=>{
						if(res.data.code == 20021){
							bnum = res.data.date
							console.log("bum:"+res.data.date)
							uni.request({
								url:http+"note/getnotenum/girl",
								method:"GET",
								complete:(res)=>{
									if(res.data.code == 20021){
										gnum = res.data.date
										resolve()
									}else{
										reject()
									}
								}
							})
						}else{
							reject()
						}
					}
				})
			})
			promise.then(res=>{
				this.boynum = bnum
				this.girlnum = gnum
				console.log("a:"+bnum+"b:"+gnum)
			}).catch(res =>{
				uni.$u.toast("获取箱子纸条个数失败")
			})
		},
		methods:{
			boyin(){
				this.ztshow = true
				console.log("点击了放入男生纸条")
			},
			//抽取男生纸条
			boyout(){
				uni.showLoading({
					title:"正在抽取纸条中",
					mask: true
				})
				var user = uni.getStorageSync('user')
				//验证用户是否登录
				if(! user){
					uni.$u.toast("您还未登录，登录后才能抽取纸条")
					return
				}
				uni.request({
					url:http+"note/getnoterandom/1/"+JSON.parse(user).id,
					method:"GET",
					complete:(res)=>{
						if(res.data.code == 20021){
							if(res.data.date == null){
								console.log(res.data.date)
								uni.$u.toast("纸条已经抽完了,或者您抽取次数已达上限")
								uni.hideLoading()
							}else{
								console.log("获取成功"+ JSON.stringify(res.data.date))
								uni.$u.toast("抽取纸条成功")
								this.cqshow = true
								this.note = res.data.date
								uni.hideLoading()
							}
						}else{
							uni.$u.toast("抽取纸条失败")
							uni.hideLoading()
						} 
					}
				})
				console.log("点击了抽取男生纸条")
			},
			girlin(){
				this.ztshow1 = true
				console.log("点击了放入女生纸条")
			},
			//抽取女生纸条
			girlout(){
				uni.showLoading({
						title:"正在抽取纸条中",
						mask: true
					})
					var user = uni.getStorageSync('user')
					//验证用户是否登录
					if(! user){
						uni.$u.toast("您还未登录，登录后才能抽取纸条")
						return
					}
					uni.request({
						url:http+"note/getnoterandom/0/"+JSON.parse(user).id,
						method:"GET",
						complete:(res)=>{
							if(res.data.code == 20021){
								if(res.data.date == null){
									console.log(res.data.date)
									uni.$u.toast("纸条已经抽完了,或者您抽取次数已达上限")
									uni.hideLoading()
								}else{
									console.log("获取成功"+ JSON.stringify(res.data.date))
									uni.$u.toast("抽取纸条成功")
									this.cqshow = true
									this.note = res.data.date
									uni.hideLoading()
								}
							}else{
								uni.$u.toast("抽取纸条失败")
								uni.hideLoading()
							} 
						}
					})
					console.log("点击了抽取女生纸条")
			},
			//放入男生纸条
			ztbutton(){
				uni.showLoading({
					title:"正在放入中",
					mask: true
				})
				var user = uni.getStorageSync('user')
				//验证用户是否登录
				if(! user){
					uni.$u.toast("您还未登录，登录才能放入纸条")
					return
				}
				if(JSON.parse(user).sex == 0){
					uni.$u.toast("只有男生才能放入喔")
					this.cttext = ""
					this.cttitle = ""
					return
				}
				if(this.cttitle.length > 10){
					uni.$u.toast("标题不能超过10个字喔")
					return
				}
				if(this.cttext.length > 200){
					uni.$u.toast("内容不能超过200个字喔")
					return
				}
				var note = {
					id:"",
					title:this.cttitle,
					content:this.cttext,
					issueUserid:JSON.parse(user).id,
					issueUsername:JSON.parse(user).name,
					issueUserimg:JSON.parse(user).img,
					sex:JSON.parse(user).sex,
					state:0,
				}
					//执行放入纸条操作
				uni.request({
					url:http+"/note",
					method:"POST",
					data:note,
					complete:(res)=>{
						if(res.data.code == 20011){
							this.ztshow = false
							uni.hideLoading()
							this.cttext = ""
							this.cttitle = ""
							this.boynum = parseInt(this.boynum) + 1
							uni.$u.toast("放入纸条成功!")
						}else{
							if(res.data.date == 1){
								uni.hideLoading()
								this.cttext = ""
								this.cttitle = ""
								uni.$u.toast("今日放入纸条已达上限!")
							}
							if(res.data.date == 2){
								uni.hideLoading()
								this.cttext = ""
								this.cttitle = ""
								uni.$u.toast("放入纸条失败!")
							}
						}
					}
				})
			},
			ztbutton1(){
				uni.showLoading({
					title:"正在放入中",
					mask: true
				})
				var user = uni.getStorageSync('user')
				//验证用户是否登录
				if(! user){
					uni.$u.toast("您还未登录，登录才能放入纸条")
					return
				}
				if(JSON.parse(user).sex == 1){
					uni.$u.toast("只有女生才能放入喔")
					this.cttext = ""
					this.cttitle = ""
					return
				}
				if(this.cttitle.length > 10){
					uni.$u.toast("标题不能超过10个字喔")
					return
				}
				if(this.cttext.length > 200){
					uni.$u.toast("内容不能超过200个字喔")
					return
				}
				var note = {
					id:"",
					title:this.cttitle,
					content:this.cttext,
					issueUserid:JSON.parse(user).id,
					issueUsername:JSON.parse(user).name,
					issueUserimg:JSON.parse(user).img,
					sex:JSON.parse(user).sex,
					state:0,
				}
					//执行放入纸条操作
				uni.request({
					url:http+"/note",
					method:"POST",
					data:note,
					complete:(res)=>{
						if(res.data.code == 20011){
							this.ztshow1 = false
							uni.hideLoading()
							this.cttext = ""
							this.cttitle = ""
							this.girlnum = parseInt(this.girlnum) + 1
							uni.$u.toast("放入纸条成功!")
						}else{
							if(res.data.date == 1){
								uni.hideLoading()
								this.cttext = ""
								this.cttitle = ""
								uni.$u.toast("今日放入纸条已达上限!")
							}
							if(res.data.date == 2){
								uni.hideLoading()
								this.cttext = ""
								this.cttitle = ""
								uni.$u.toast("放入纸条失败!")
							}
						}
					}
				})
			},
			open() {
				this.show = true
			},
			close() {
				this.show = false
			},
			open1(){
				this.ztshow = true
			},
			close1(){
				this.ztshow = false
			},
			open2(){
				this.ztshow1 = true
			},
			close2(){
				this.ztshow1 = false
			},
			//关闭抽取的纸条
			ztclose(){
				this.cqshow = false
			},
		}
	}
</script> 

<style>
	@import url("../static/css/componentsCss/makefriends/mygiay.css");
</style>